<template>
  <div class="header">
    <header>
      <div class="logo">
        <a href=" http://localhost:8080/"
          ><img src="https://s2.loli.net/2022/06/09/L2pC6jgdyxfo8qn.png"
        /></a>
      </div>
      <div class="logo2">
        <a href="javascript:;"
          ><img src="https://s2.loli.net/2022/06/09/tSIyvWTbcRDElnY.png"
        /></a>
        <div class="time">
          <span
            >当前时间：<span>{{ date | dateFormat }}</span></span
          >
        </div>
      </div>
    </header>
    <div class="swiper-container">
      <div class="nav">
        <div class="nav-item">
          <ul>
            <li>
              <div
                class="navmenu"
                :style="{ background: bgcolor }"
                @click="path('home', 1, '首页')"
              >
                <a href="javascript:;" @click="bgColor(0)">首页</a>
              </div>
            </li>

            <li>
              <div
                class="navmenu"
                @mouseover="show1 = true"
                @mouseout="show1 = false"
                @click="path('tab2', 2, '学院概况')"
              >
                <a href="javascript:;" @click="bgColor(1)">学院概况</a>
                <div class="menu" v-show="show1">
                  <div class="menu-item">
                    <a href="javascript:;">学院介绍</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">学院荣誉</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">联系我们</a>
                  </div>
                </div>
              </div>
            </li>

            <li>
              <div
                class="navmenu"
                @mouseover="show2 = true"
                @mouseout="show2 = false"
                @click="path('tab3', 3, '党团建设')"
              >
                <a href="javascript:;" @click="bgColor(2)">党团建设</a>
                <div class="menu" v-show="show2">
                  <div class="menu-item">
                    <a href="javascript:;">党团活动</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">入党指南</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">入团指南</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">学生风采</a>
                  </div>
                </div>
              </div>
            </li>

            <li>
              <div
                class="navmenu"
                @mouseover="show3 = true"
                @mouseout="show3 = false"
                @click="path('tab4', 4, '师资队伍')"
              >
                <a href="javascript:;" @click="bgColor(3)">师资队伍</a>
                <div class="menu" v-show="show3">
                  <div class="menu-item">
                    <a href="javascript:;">师资队伍</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">专业团队</a>
                  </div>
                </div>
              </div>
            </li>

            <li>
              <div
                class="navmenu"
                @mouseover="show4 = true"
                @mouseout="show4 = false"
                @click="path('tab5', 5, '专业介绍')"
              >
                <a href="javascript:;" @click="bgColor(4)">专业介绍</a>
                <div class="menu" v-show="show4">
                  <div class="menu-item">
                    <a href="javascript:;">物流管理专业</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">大数据与会计</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">电子商务专业</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">工商企业管理</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">国际商务专业</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">市场营销专业</a>
                  </div>
                </div>
              </div>
            </li>

            <li>
              <div
                class="navmenu"
                @mouseover="show5 = true"
                @mouseout="show5 = false"
                @click="path('tab6', 6, '产权融合')"
              >
                <a href="javascript:;" @click="bgColor(5)">产权融合</a>
                <div class="menu" v-show="show5">
                  <div class="menu-item">
                    <a href="javascript:;">合作企业</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">实训基地</a>
                  </div>
                </div>
              </div>
            </li>

            <li>
              <div
                class="navmenu"
                @mouseover="show6 = true"
                @mouseout="show6 = false"
                @click="path('tab7', 7, '招生就业')"
              >
                <a href="javascript:;" @click="bgColor(6)">招生就业</a>
                <div class="menu" v-show="show6">
                  <div class="menu-item">
                    <a href="javascript:;">招生信息</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">就业信息</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">创新创业</a>
                  </div>
                  <div class="menu-item">
                    <a href="javascript:;">校友风采</a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="bg">
        <a href="javascript:;" target="_blank"></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  data() {
    return {
      date: new Date(),
      bgcolor: '#0055a7',
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false
    }
  },
  methods: {
    bgColor(id) {
      let navmenu = document.querySelectorAll('.navmenu')
      console.log(navmenu)
      for (let index = 0; index < navmenu.length; index++) {
        navmenu[index].style.background = ''
      }
      navmenu[id].style.background = '#0055a7'
    },

    // 路由的跳转
    // router 路由名字
    // id
    // name
    path(router, id, name) {
      this.$router.push({
        // 跳转的路由的 名称
        name: router,
        // 进行路由传参
        // 查询参数
        query: { id: id, name: name }
        // this.$route.query
      })
    }
  }
}
</script>

<style lang="less" scoped>
header {
  width: 1200px;
  height: 116px;
  margin: 0 auto;
  .logo {
    float: left;
    width: 527px;
    height: 71px;
    img {
      margin-top: 25px;
    }
  }
  .logo2 {
    float: right;
    width: 450px;
    img {
      width: 450px;
      height: 71px;
    }
    .time {
      font-size: 16px;
    }
  }
}
.swiper-container {
  width: 100%;
  height: 456px;
  background: yellow;

  .nav {
    width: 100%;
    height: 56px;
    background: #003b90;

    .nav-item {
      width: 1200px;
      height: 56px;
      background: #003b90;
      margin: 0 auto;

      li {
        float: left;
        width: 167.333px;
        height: 56px;
        margin: 0 2px;
        .navmenu {
          text-align: center;
          line-height: 56px;
          color: #fff;

          .menu-item {
            height: 40px;
            line-height: 40px;
            background: #0055a7;
          }
        }
      }
    }
  }
  .bg {
    height: 400px;
    width: 100%;
    background: url('https://s2.loli.net/2022/06/10/IrAWsR2aKHPGLhq.jpg');
  }
}
// 组件库样式
</style>
